<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
    nav{
        width:400px;
        height:150px;
        margin:200px auto;
        border:1px solid red;
    }
    ul{
        list-style: none;
        background-color: black;
        margin:0 auto;
        width:360px;
        height:30px;  
        text-align: center;
        line-height: 30px;   
    }
    li{
        float:left;
        width:100px;
        height:30px;
        color: white;
    }
    .one{
        width:inherit;
        /* background-color: red; */
    }
    .two{
        width:inherit;
        /* background-color: yellow; */
    }
    .three{
        width:inherit;
        /* background-color: blue; */
    }
    section{
        display: none; 
        background-color:gray;
    }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>选项一
                <section>内容一</section>
            </li>
            <li>选项二                
                     <section>内容二</section>
                     <section>内容二</section>                
            </li>
            <li>选项三
                <section>内容三</section>
                <section>内容三</section>
                <section>内容三</section>
            </li>
        </ul>
    </nav>
    <script src="jqurey.js"></script>
</body>
</html>
<script>
    $('ul li').hover(function(){
        $(this).css('background-color','white').css('color','black').siblings().css('background-color','black'); 
        $(this).children().css('display','block').css('background-color','gray');
        console.log($(this).section);
    },function(){
        $(this).css('background-color','black').css('color','white');
        $(this).children('').css('display','none');        
    })
</script>